<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-steps :active="step" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="规格参数"></el-step>
          <el-step title="销售属性"></el-step>
          <el-step title="SKU信息"></el-step>
          <el-step title="保存完成"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" v-show="step==0">
        <el-card class="box-card" style="width:80%;margin:20px auto;">
          <el-form :model="spu" :rules="spuBaseInfoRule" ref="spuBaseForm" label-width="120px">
            <el-form-item label="商品名称" prop="spuName">
              <el-input v-model="spu.spuName" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="spuDescription">
              <el-input v-model="spu.spuDescription" placeholder="商品描述"></el-input>
            </el-form-item>
            <el-form-item label="选择分类" prop="catalogId">
              <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
            </el-form-item>
            <el-form-item label="选择品牌" prop="brandId">
              <brand-select></brand-select>
            </el-form-item>
            <el-form-item label="商品重量(kg)" prop="weight">
              <el-input-number v-model.number="spu.weight" :precision="3" :step="0.1" :min="0" label="商品重量"></el-input-number>
            </el-form-item>
            <el-form-item label="设置积分" prop="bounds">
              <label>金币</label>
              <el-input-number style="width:130px" v-model="spu.bounds.buyBounds" :min="0" controls-position="right" placeholder="金币"></el-input-number>
              <label style="margin-left:15px">成长值</label>
              <el-input-number style="width:130px" v-model="spu.bounds.growBounds" :min="0" controls-position="right" placeholder="成长值"></el-input-number>
            </el-form-item>
            <el-form-item label="商品介绍" prop="descript">
              <multi-upload v-model="spu.descript"></multi-upload>
            </el-form-item>
            <el-form-item label="商品图集" prop="images">
              <multi-upload v-model="spu.images"></multi-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="collectSpuBaseInfo">下一步: 设置基本参数</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step==1">
        <el-card class="box-card" style="width:80%;margin:20px auto;">
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step==2">
        <el-card class="box-card" style="width:80%;margin:20px auto;">
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step==3">
        <el-card class="box-card" style="width:80%;margin:20px auto;">
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step==4">
        <el-card class="box-card" style="width:80%;margin:20px auto;">
          <h1>保存成功</h1>
          <el-button type="primary" @click="addAgain">继续添加</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MultiUpload from '@/components/upload/multiUpload';
import BrandSelect from '../common/brand-select';
import CategoryCascader from '../common/category-cascader';

export default {
  data() {
    return {
      step: 0,
      catelogPath: [],
      spu: {
        spuName: "",
        spuDescription: "",
        catalogId: 0,
        brandId: "",
        weight: "",
        publishStatus: 0,
        descript: [], // 商品详情
        images: [], // 商品图集
        bounds: {
          // 积分
          buyBounds: 0,
          growBounds: 0
        },
        baseAttrs: [], // 基本属性
        skus: [] // 所有sku信息
      },
      spuBaseInfoRule: {

      }
    };
  },
  methods: {

    collectSpuBaseInfo() {
      this.$refs.spuBaseForm.validate(valid => {
        if (valid) {
          this.step = 1;
          this.showBaseAttrs();
        } else {
          return false;
        }
      });
    },
    showBaseAttrs() {

    },
    addAgain() {

    }
  },
  created() {

  },
  mounted() {

  },
  components: { CategoryCascader, BrandSelect, MultiUpload },
}
</script>

<style>
</style>